<template>
	<view class="home container">
		<uni-nav-bar dark :fixed="true" color="#000" :border="false" background-color="#fff" status-bar
			:title="$t('tabBar.home')" />
		<view v-if="isList">
			<view class="w_90 bg_color_f select-box">
				<uni-data-select v-model="value" :localdata="range" @change="handleSelectChange"
					:clear="false"></uni-data-select>
			</view>

			<!-- 工作列表 -->
			<view class="list-box w_90" v-show="!isShowWork">
				<view class="item flex_s bg_color_f" v-for="(item,index) in listData" :key="item.id"
					@click="handleTo(index)">
					<view class="item-l flex">
						<view>
							<image style="width:123rpx;height: 123rpx;" :src="item.img"></image>
						</view>
						<view class="item-cont">
							<view>{{item.title}}</view>
							<view class="time" v-if="item.text != ''">{{item.text}}</view>
						</view>
					</view>
					<view class="item-r"><uni-icons :type="forward" color="#999" size="18"></uni-icons></view>
				</view>
			</view>
			<!-- 工作中 -->
			<view :key="renderKey">
				<view class="work-status" v-if="isShowWork">
					<CareingComp :deviceSn="deviceinfo.sn" @change="change" :deviceWorkStatus="deviceinfo.workStatus"
						@stopCare="handleStopCare">
					</CareingComp>
				</view>
			</view>
		</view>

		<!-- 空数据 -->
		<view v-else class="empty">
			<view class="color_9 text_center">{{$t('home.No-available-devices')}}</view>
			<view class="btn flex_col_center marg_auto" @click="config.path('/pagesA/device/addDevice/addDevice')">
				{{$t('home.Go-add')}}
			</view>
		</view>
		<waring-pop ref="WaringPop" @confirm="handleErrorConfirm" :alarms="popupAlarmdata"></waring-pop>
	</view>
</template>

<script>
	import {
		deviceInfo,
		deviceList
	} from '@/api/device.js'
	import CareingComp from '@/componets/CareingComp.vue'
	import WaringPop from '@/componets/WaringPop.vue';


	export default {
		components: {
			CareingComp,
			WaringPop
		},
		data() {
			return {
				popupAlarmdata: [], //异常弹窗
				workStatus: 0, //工作状态
				currentSn: '', //当前设备sn
				deviceListArr: [], //设备列表
				value: 0, // 默认选中设备
				range: [{
					value: 0,
					sn: '111111111C600011',
					text: "请选择"
				}],
				isList: false, //是否有数据				
				listData: [{
						id: 1,
						title: '快速护理',
						text: '30分钟',
						img: '/static/image/home_01.png',
					},
					{
						id: 2,
						title: '精细护理',
						text: '',
						img: '/static/image/home_02.png',
					},
					{
						id: 3,
						title: '娇奢',
						text: '适用于羊绒和丝绸等娇奢面料55分钟',
						img: '/static/image/home_03.png',
					},
					{
						id: 4,
						title: '轻柔烘干',
						text: '',
						img: '/static/image/home_04.png',
					},
					{
						id: 5,
						title: '祛味除菌',
						text: '',
						img: '/static/image/home_05.png',
					}
				],
				deviceinfo: {}, //设备信息
				isShowWork: false, // 是否显示工作中
				deviceAlarmList: [], //判断当前选择的设备是否有故障
			};
		},
		onLoad() {
			// 获取设备列表
			// this.getDeviceList();			
		},
		onShow() {
			// // 定义要转换的中文字符串
			// const chineseText = "jueli-01";
			// let resultBinary = '';
			// // 遍历字符串中的每个字符
			// for (let i = 0; i < chineseText.length; i++) {
			// 	const charCode = chineseText.charCodeAt(i);
			// 	// 将字符编码转换为二进制字符串
			// 	const binaryStr = charCode.toString(2).padStart(16, '0');
			// 	resultBinary += binaryStr;
			// }
			// console.log("二进制表示:", resultBinary);

			// const binaryStr =
			// 	'00000000011010100000000001110101000000000110010100000000011011000000000001101001000000000010110100000000001100000000000000110001';
			// const originalText = this.binaryToOriginal(binaryStr);
			// console.log(originalText, '转回');

			let token = uni.getStorageSync('token');

			if (token) {
				let currentSn = uni.getStorageSync('careSn');
				if (currentSn) {
					this.deviceInfo(currentSn)
					uni.setStorageSync('careSn', null);
				} else {
					this.getDeviceList(); //获取设备列表		
				}
			}
			this.EnglistData();
		},
		methods: {

			// binaryToOriginal(binaryStr) {
			// 	let result = '';
			// 	// 按每 16 位分割二进制字符串
			// 	for (let i = 0; i < binaryStr.length; i += 16) {
			// 		const binaryChunk = binaryStr.slice(i, i + 16);
			// 		// 将二进制字符串转换为十进制整数
			// 		const charCode = parseInt(binaryChunk, 2);
			// 		// 将十进制整数转换为对应的字符
			// 		result += String.fromCharCode(charCode);
			// 	}
			// 	return result;
			// },
			change() {
				setTimeout(() => {
					// this.isShowWork = false;
					this.deviceInfo(this.deviceinfo.sn);
				}, 1000)
			},
			handleStopCare() {
				console.log(this.deviceinfo, '6666666666666666666666')
				if (this.deviceAlarmList.length != 0) {
					// 设备异常弹窗
					this.$refs.WaringPop.open();
					this.popupAlarmdata = this.deviceAlarmList
				} else {
					setTimeout(() => {
						// this.isShowWork = false;
						this.deviceInfo(this.deviceinfo.sn);
					}, 1000)

				}

			},
			// 重新赋值
			EnglistData() {
				this.listData = [{
						id: 1,
						title: this.$t('home.Quick-care'),
						text: this.$t('home.30min'),
						img: '/static/image/home_01.png',
					},
					{
						id: 2,
						title: this.$t('home.Fine-care'),
						text: '',
						img: '/static/image/home_02.png',
					},
					{
						id: 3,
						title: this.$t('home.Luxury-care'),
						text: this.$t('home.55minutes'),
						img: '/static/image/home_03.png',
					},
					{
						id: 4,
						title: this.$t('home.Gently-dry'),
						text: '',
						img: '/static/image/home_04.png',
					},
					{
						id: 5,
						title: this.$t('home.Sterilization'),
						text: '',
						img: '/static/image/home_05.png',
					}
				]
			},
			// 获取设备列表
			getDeviceList() {
				deviceList().then((r) => {
					// 验证是否又设备，无设备显示去添加
					if (!r.data || r.data.length < 1) {
						this.isList = false;
						return;
					}

					this.isList = true;
					this.range = r.data.map((item, index) => {
						// 首先检查deviceList是否存在，并且index是否在deviceList的范围内
						if (r.data) {
							return {
								...item,
								value: index,
								text: r.data[index].deviceName || item
									.sn, // 直接使用deviceList数组中对应索引的deviceName替换text
							};
						}
					});
					this.deviceListArr = r.data; // 当前所有设备数据

					// 默认选中第一台设备
					this.value = 0;
					this.deviceAlarmList = this.range[0].deviceAlarmList //默认
					this.deviceInfo(this.range[0].sn);

					this.$forceUpdate();
				});
			},
			// 获取设备详情  
			deviceInfo(sn) {
				deviceInfo({
					sn: sn
				}).then((r) => {
					this.deviceinfo = r.data; // 储存设备信息
					console.log(r.data.workStatus, '主页面阐述')
					switch (r.data.workStatus) {
						case 0:
							this.isShowWork = false; // 默认初始化界面
							break;
						case 5:
							uni.hideLoading() //清空终止加载
							this.isShowWork = false; // 默认初始化界面
							break;
						case 6:
							uni.hideLoading() //清空终止加载
							this.isShowWork = false; // 默认初始化界面
							break;
						default:
							this.isShowWork = true;
							this.$forceUpdate();
							break;
					}
					// if (r.data.workStatus != 0 || r.data.workStatus != 5 || r.data.workStatus != 6) {
					// 	this.isShowWork = true;
					// 	this.$forceUpdate();
					// }
				}).catch((err) => {
					console.log('err==', err)
				})
			},
			handleErrorConfirm() {
				// 这里添加你想要执行的代码
				console.log('知道了');
			},
			handleTo(index) {
				console.log(this.deviceAlarmList.length, '000000')
				if (this.deviceAlarmList.length != 0) {
					// 设备异常弹窗
					this.$refs.WaringPop.open();
					this.popupAlarmdata = this.deviceAlarmList
				} else {
					console.log('222222')
					// 验证当前用户是否绑定机器
					if (!this.deviceinfo.sn) {
						console.log('33333')
						this.config.Toast(`${this.$t('bind.device')}~`)
						return;
					}

					let str = '';
					// workStatus:0 未工作 
					console.log(this.deviceinfo, '444444')
					if (this.deviceinfo.workStatus === 0 || this.deviceinfo.workStatus === 5 || this.deviceinfo
						.workStatus === 6) {
						switch (index) {
							case 0:
								str = '/pagesA/home/quickCare/quickCare?sn=' + this.deviceinfo.sn
								break;
							case 1:
								str = '/pagesA/home/fineCare/fineCare?sn=' + this.deviceinfo.sn
								break;
							case 2:
								str = '/pagesA/home/luxuryCare/luxuryCare?sn=' + this.deviceinfo.sn
								break;
							case 3:
								str = '/pagesA/home/timeSelection/timeSelection?sn=' + this.deviceinfo.sn
								break;
							case 4:
								str = '/pagesA/home/timeSterilization/timeSterilization?sn=' + this.deviceinfo.sn
								break;
							default:
								break;
								// 如果expression的值与所有的case都不匹配，则执行这里的代码
						}

						this.config.path(str)
					}
				}


			},
			// 切换设备
			handleSelectChange(value) {
				this.deviceAlarmList = []
				this.deviceAlarmList = this.deviceListArr[value].deviceAlarmList
				this.deviceInfo(this.deviceListArr[value].sn); //获取设备信息
			}
		},
	}
</script>

<style>
	.uni-select {
		border: none !important;
		height: 78rpx !important;
	}

	.uni-steps__column-circle {
		width: 20rpx !important;
		height: 20rpx !important;
	}

	.uniui-checkbox-filled:before {
		content: "\e665" !important;
		color: #AF9453;
		border: 1px solid #AF9453;
		border-radius: 50%;
		margin-left: 1px;
	}

	.uni-steps__column-desc {
		opacity: 0;
	}

	.uni-steps__column-text {
		border: none !important;
	}
</style>
<style lang="scss">
	.hidden {
		display: none;
	}

	.home {
		color: #333333;

		.select-box {
			margin-bottom: 30rpx;
			border-radius: 15rpx;
			margin-top: 30rpx;
		}

		.list-box {
			.item {
				margin-bottom: 20rpx;
				padding: 30rpx;
				box-sizing: border-box;
				border-radius: 20rpx;
				font-size: 32rpx;

				.item-l {
					.item-cont {
						margin-left: 24rpx;

						.time {
							margin-top: 13rpx;
							color: $uni-theme-color;
							font-size: 26rpx;
						}
					}
				}
			}
		}

		.empty {
			font-size: 30rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			.btn {
				margin-top: 48rpx;
				width: 406rpx;
				height: 89rpx;
				background: $uni-theme-color;
				border-radius: 10rpx;
				color: #fff;
			}
		}
	}
</style>